<template>
  <div>
    <Title :title="title"></Title>
    
    <div ref="bottom3" style="height: 150px; margin-top: 30px;"></div>
  </div>
</template>
<script>
// 引入面积图构造函数（对应温度曲线的Line）
import { Area } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment';
import { mapState } from 'vuex'; // 保持Vuex状态映射方式一致
// import Title from './Title.vue';

export default {
  data() {
    return {
      title: '监测点信息', // 对应温度曲线的"实时温度曲线"
      params: {
        page: 1,
        pageSize: 100 // 与温度曲线请求参数完全一致
      },
      // 存放面积图数据（对应温度曲线的tempData）
      areaData: [],
      // 面积图实例（对应温度曲线的line实例，便于后续更新）
      areaChart: null
    }
  },
  computed: {
    // 复用温度曲线的Vuex状态映射，监听ed变化（设备切换）
    ...mapState(['ed'])
  },
  watch: {
    ed: {
      handler(n, o) {
        // 与温度曲线逻辑一致：设备切换时更新参数、重新请求数据、更新图表
        this.params.engineer_id = n.engineer_id;
        this.params.device_id = n.device_id;
        this.getAreaData();
        // 确保实例存在后更新数据（避免初始化时报错）
        if (this.areaChart) {
          this.areaChart.changeData(this.areaData);
        }
      },
      // 深度监听（与温度曲线一致，处理ed对象内部属性变化）
      deep: true
    }
  },
  methods: {
    // 封装加载面积图的函数（对应温度曲线的loadLine）
    loadArea() {
      // 创建面积图实例（结构与温度曲线的Line实例一致）
      this.areaChart = new Area(this.$refs.bottom3, {
        data: this.areaData,
        xField: 'insert_time', // 横轴：时间
        yField: 'value',       // 纵轴：污染物数值
        seriesField: 'type',   // 系列区分：PM2.5/PM10/TSP
        // 面积图基础样式（新增，适配深色背景）
        areaStyle: {
          fillOpacity: 0.4 // 面积透明度，避免系列重叠遮挡
        },
        // 折线样式
        lineStyle: {
          width: 2,
          stroke: '#5B8FF9' // 基础折线色，系列色会自动区分
        },
        // 坐标轴配置
        xAxis: {
          label: {
            rotate: -45, // 时间标签旋转
            style: {
              fill: "white",
              fontSize: 13
            }
          },
          grid: {
            line: {
              style: {
                stroke: 'rgba(255, 255, 255, 0.1)' // 浅色网格
              }
            }
          }
        },
        yAxis: {
          label: {
            style: {
              fill: "white",
              fontSize: 13
            }
          },
          line: {
            style: {
              stroke: 'rgba(255, 255, 255, 0.3)'
            }
          }
        },
        // 数据标签
        label: {
          style: {
            fill: "white",
            fontSize: 13
          }
        },
        // 图例配置
        legend: {
          position: 'top-right',
          itemName: {
            style: {
              fill: "white",
              fontSize: 13
            }
          },
          marker: {
            size: 5 // 图例标记大小
          }
        },
        // Tooltip配置（完全模仿温度曲线，保持背景、字体、大小一致）
        tooltip: {
          showMarkers: false,
          domStyles: {
            "g2-tooltip": {
              background: '#147',
              color: "white",
              fontSize: 20
            }
          },
          // 自定义tooltip内容（贴合污染物业务，显示类型+数值+单位）
          formatter: (datum) => ({
            name: datum.type,
            value: `${datum.value} μg/m³`,
            extra: [{ name: '时间', value: datum.insert_time }]
          })
        },
        // 状态交互
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: '#000',
              fill: 'red',
            },
          },
        },
        interactions: [{ type: 'marker-active' }],
        // 动画配置
        animation: {
          appear: {
            animation: 'wave-in',
            duration: 5000,
          },
        }
      });
      // 渲染面积图
      this.areaChart.render();
    },

    async getAreaData() {
      let res = await get('/dashboard/pageQueryTodayData', this.params);
      console.log(res, "获取监测点数据响应");
      let temp = [];
      // 数据处理逻辑完全模仿温度曲线：初始化第一条数据+时间格式化+抽样
      res.data.list.forEach((item, index, arr) => {
        // 初始化第一条数据（
        arr[0].pm10 = 20;
        arr[0].pm25 = 20;
        arr[0].tsp = 20;
        // 时间格式化
        item.insert_time = moment(item.insert_time).format("HH:mm");
        // 数据抽样
        if (index % 10 == 0) {
          // 拆分PM2.5/PM10/TSP数据
          if (item.pm25 !== undefined && item.pm25 !== null) {
            temp.push({ ...item, type: 'PM2.5', value: item.pm25 });
          }
          if (item.pm10 !== undefined && item.pm10 !== null) {
            temp.push({ ...item, type: 'PM10', value: item.pm10 });
          }
          if (item.tsp !== undefined && item.tsp !== null) {
            temp.push({ ...item, type: 'TSP', value: item.tsp });
          }
        }
      });
      this.areaData = temp;
    }
  },
  async mounted() {
    await this.getAreaData();
    this.loadArea();
  },
  
  beforeDestroy() {
    if (this.areaChart) {
      this.areaChart.destroy();
    }
  }
}
</script>
<style lang="less" scoped></style>